<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>危机支持 - AI治疗师</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4A90A4;
            --secondary-color: #F5F3F0;
            --accent-color: #2E7D32;
            --warning-color: #FF8A65;
            --text-dark: #2C3E50;
            --text-light: #7F8C8D;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--secondary-color) 0%, #E8F4F8 100%);
            min-height: 100vh;
        }
        
        .hero-title {
            font-family: 'Playfair Display', serif;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .crisis-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(74, 144, 164, 0.1);
            transition: all 0.3s ease;
        }
        
        .crisis-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }
        
        .emergency-banner {
            background: linear-gradient(135deg, #EF4444, #DC2626);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.9; }
        }
        
        .resource-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }
        
        .resource-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .safety-plan-step {
            background: rgba(255, 255, 255, 0.9);
            border-left: 4px solid #4A90A4;
            transition: all 0.3s ease;
        }
        
        .safety-plan-step:hover {
            border-left-color: #2E7D32;
            background: rgba(255, 255, 255, 1);
        }
        
        .breathing-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4A90A4, #2E7D32);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin: 0 auto;
            transition: all 4s ease-in-out;
        }
        
        .breathing-circle.inhale {
            transform: scale(1.3);
        }
        
        .breathing-circle.exhale {
            transform: scale(0.8);
        }
        
        .counselor-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .counselor-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }
        
        .support-group-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }
        
        .support-group-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .resource-item {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(3px);
            transition: all 0.3s ease;
        }
        
        .resource-item:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: translateX(5px);
        }
        
        .modal {
            backdrop-filter: blur(10px);
        }
        
        .rating-stars {
            color: #FCD34D;
        }
        
        .available-badge {
            background: linear-gradient(135deg, #10B981, #059669);
        }
        
        .busy-badge {
            background: linear-gradient(135deg, #F59E0B, #D97706);
        }
        
        .offline-badge {
            background: linear-gradient(135deg, #6B7280, #4B5563);
        }
    </style>
</head>
<body class="text-gray-800">
    
    <!-- Navigation -->
    <nav class="bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-teal-500 rounded-full flex items-center justify-center">
                        <span class="text-white font-bold text-lg">🤖</span>
                    </div>
                    <span class="text-xl font-semibold text-gray-800">AI治疗师</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-600 hover:text-blue-600 transition-colors">治疗对话</a>
                    <a href="monitoring.html" class="text-gray-600 hover:text-blue-600 transition-colors">情绪监测</a>
                    <a href="crisis.html" class="text-blue-600 font-medium border-b-2 border-blue-600 pb-1">危机支持</a>
                    <a href="support.html" class="text-gray-600 hover:text-blue-600 transition-colors">专业支持</a>
                    <a href="about.html" class="text-gray-600 hover:text-blue-600 transition-colors">关于系统</a>
                </div>
                <button class="md:hidden p-2 rounded-md text-gray-600 hover:text-blue-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- Emergency Banner -->
    <div class="emergency-banner text-white py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="flex items-center justify-center space-x-3">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                <h2 class="text-lg font-semibold">如果您有自杀或自残的想法，请立即寻求专业帮助</h2>
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
            </div>
        </div>
    </div>

    <!-- Header -->
    <section class="pt-12 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h1 class="hero-title text-4xl md:text-5xl font-bold mb-4 opacity-0" id="main-title">
                    专业支持资源
                </h1>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-6 opacity-0" id="subtitle">
                    全面的心理健康专业服务，包括在线咨询、支持小组、资源库和医生定位
                </p>
            </div>
        </div>
    </section>

    <!-- Emergency Contacts -->
    <section class="pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="crisis-card rounded-2xl p-8 mb-8">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">🚨 紧急联系方式</h2>
                    <p class="text-gray-600">如果您或您认识的人正处于危机中，请立即联系以下专业帮助</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="text-center p-6 bg-red-50 rounded-xl">
                        <div class="w-16 h-16 bg-red-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-red-800 mb-2">心理危机热线</h3>
                        <p class="text-2xl font-bold text-red-600 mb-2">400-161-9995</p>
                        <p class="text-sm text-red-700">24小时专业服务</p>
                        <button onclick="callHotline('400-161-9995')" class="mt-3 bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition-colors">
                            立即拨打
                        </button>
                    </div>
                    
                    <div class="text-center p-6 bg-blue-50 rounded-xl">
                        <div class="w-16 h-16 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-blue-800 mb-2">全国心理援助热线</h3>
                        <p class="text-2xl font-bold text-blue-600 mb-2">12320</p>
                        <p class="text-sm text-blue-700">政府专业服务</p>
                        <button onclick="callHotline('12320')" class="mt-3 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                            立即拨打
                        </button>
                    </div>
                    
                    <div class="text-center p-6 bg-green-50 rounded-xl">
                        <div class="w-16 h-16 bg-green-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-green-800 mb-2">北京危机干预中心</h3>
                        <p class="text-2xl font-bold text-green-600 mb-2">800-810-1117</p>
                        <p class="text-sm text-green-700">免费专业服务</p>
                        <button onclick="callHotline('800-810-1117')" class="mt-3 bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors">
                            立即拨打
                        </button>
                    </div>
                    
                    <div class="text-center p-6 bg-purple-50 rounded-xl">
                        <div class="w-16 h-16 bg-purple-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-purple-800 mb-2">生命热线</h3>
                        <p class="text-2xl font-bold text-purple-600 mb-2">400-161-9995</p>
                        <p class="text-sm text-purple-700">情感支持服务</p>
                        <button onclick="callHotline('400-161-9995')" class="mt-3 bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
                            立即拨打
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Online Counseling -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">在线心理咨询</h2>
                <p class="text-lg text-gray-600">专业心理咨询师提供24/7在线服务</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                <!-- Counselor Cards will be generated by JavaScript -->
            </div>
            
            <div class="text-center">
                <button onclick="showAllCounselors()" class="bg-gradient-to-r from-blue-500 to-teal-500 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-300">
                    查看所有咨询师
                </button>
            </div>
        </div>
    </section>

    <!-- Support Groups -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">互助支持小组</h2>
                <p class="text-lg text-gray-600">与经历相似困扰的人分享经验，互相支持</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                <!-- Support Group Cards will be generated by JavaScript -->
            </div>
            
            <div class="text-center">
                <button onclick="createSupportGroup()" class="bg-gradient-to-r from-green-500 to-emerald-500 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-300">
                    创建新的小组
                </button>
            </div>
        </div>
    </section>

    <!-- Resource Library -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">自助资源库</h2>
                <p class="text-lg text-gray-600">丰富的心理健康资源，包括文章、视频、音频和互动练习</p>
            </div>
            
            <div class="mb-6">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <input type="text" id="resource-search" placeholder="搜索心理健康资源..." class="w-full px-4 py-3 border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="flex gap-2">
                        <select id="resource-category" class="px-4 py-3 border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">所有类别</option>
                            <option value="anxiety">焦虑管理</option>
                            <option value="depression">抑郁应对</option>
                            <option value="stress">压力管理</option>
                            <option value="mindfulness">正念冥想</option>
                            <option value="sleep">睡眠改善</option>
                            <option value="relationship">人际关系</option>
                        </select>
                        <button onclick="searchResources()" class="bg-blue-500 text-white px-6 py-3 rounded-2xl hover:bg-blue-600 transition-colors">
                            搜索
                        </button>
                    </div>
                </div>
            </div>
            
            <div id="resource-results" class="space-y-4">
                <!-- Search results will be displayed here -->
            </div>
        </div>
    </section>

    <!-- Professional Directory -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-8">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">专业医生目录</h2>
                <p class="text-lg text-gray-600">查找附近的心理健康专业人士</p>
            </div>
            
            <div class="mb-6">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <input type="text" id="location-search" placeholder="输入您的位置..." class="w-full px-4 py-3 border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="flex gap-2">
                        <select id="doctor-specialty" class="px-4 py-3 border border-gray-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">所有专业</option>
                            <option value="psychiatrist">精神科医生</option>
                            <option value="psychologist">临床心理师</option>
                            <option value="therapist">心理治疗师</option>
                            <option value="counselor">心理咨询师</option>
                        </select>
                        <button onclick="searchDoctors()" class="bg-orange-500 text-white px-6 py-3 rounded-2xl hover:bg-orange-600 transition-colors">
                            查找
                        </button>
                    </div>
                </div>
            </div>
            
            <div id="doctor-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Doctor search results will be displayed here -->
            </div>
        </div>
    </section>

    <!-- Quick Support Tools -->
    <section class="pb-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                
                <!-- Breathing Exercise -->
                <div class="crisis-card rounded-2xl p-8">
                    <div class="text-center mb-8">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-teal-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-2xl">🫁</span>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">紧急呼吸练习</h3>
                        <p class="text-gray-600">当您感到恐慌或焦虑时，尝试这个简单的呼吸练习</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="breathing-circle mb-6" id="breathing-circle">
                            准备开始
                        </div>
                        <p class="text-gray-600 mb-6" id="breathing-instruction">点击开始按钮进行4-7-8呼吸法练习</p>
                        <button onclick="startEmergencyBreathing()" id="breathing-btn" class="bg-gradient-to-r from-blue-500 to-teal-500 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-300">
                            开始练习
                        </button>
                    </div>
                </div>
                
                <!-- Safety Plan Generator -->
                <div class="crisis-card rounded-2xl p-8">
                    <div class="text-center mb-8">
                        <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-2xl">🛡️</span>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">个性化安全计划</h3>
                        <p class="text-gray-600">创建您的个人安全计划，为困难时刻做好准备</p>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="safety-plan-step p-4 rounded-lg">
                            <h4 class="font-semibold text-gray-800 mb-2">1. 识别警告信号</h4>
                            <p class="text-sm text-gray-600">了解您情绪恶化的早期征象</p>
                        </div>
                        
                        <div class="safety-plan-step p-4 rounded-lg">
                            <h4 class="font-semibold text-gray-800 mb-2">2. 应对策略</h4>
                            <p class="text-sm text-gray-600">学习有效的情绪调节技巧</p>
                        </div>
                        
                        <div class="safety-plan-step p-4 rounded-lg">
                            <h4 class="font-semibold text-gray-800 mb-2">3. 支持网络</h4>
                            <p class="text-sm text-gray-600">建立您的社会支持系统</p>
                        </div>
                        
                        <button onclick="generateSafetyPlan()" class="w-full bg-gradient-to-r from-green-500 to-emerald-500 text-white py-3 px-4 rounded-lg hover:shadow-lg transition-all duration-300">
                            生成我的安全计划
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p class="text-gray-400">© 2024 AI治疗师. 专业的心理健康支持系统. 保护您的隐私是我们的首要责任.</p>
            <p class="text-gray-500 text-sm mt-2">免责声明：本系统不能替代专业医疗建议，如有紧急情况请立即联系医疗专业人员</p>
        </div>
    </footer>

    <script>
        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            initializeAnimations();
            generateCounselors();
            generateSupportGroups();
            displayInitialResources();
            displayInitialDoctors();
        });

        // Initialize animations
        function initializeAnimations() {
            anime.timeline({
                easing: 'easeOutExpo',
                duration: 1000
            })
            .add({
                targets: '#main-title',
                opacity: [0, 1],
                translateY: [50, 0],
                delay: 300
            })
            .add({
                targets: '#subtitle',
                opacity: [0, 1],
                translateY: [30, 0],
                delay: 200
            }, '-=800');

            anime({
                targets: '.crisis-card',
                opacity: [0, 1],
                translateY: [50, 0],
                delay: anime.stagger(200, {start: 600}),
                duration: 800,
                easing: 'easeOutExpo'
            });
        }

        // Generate counselors
        function generateCounselors() {
            const counselors = [
                {
                    name: '李心理博士',
                    specialty: '认知行为疗法',
                    experience: '12年经验',
                    rating: 4.9,
                    reviews: 328,
                    status: 'available',
                    image: '👨‍⚕️',
                    price: '¥200/小时',
                    languages: ['中文', '英文']
                },
                {
                    name: '王治疗师',
                    specialty: '创伤治疗',
                    experience: '8年经验',
                    rating: 4.8,
                    reviews: 256,
                    status: 'available',
                    image: '👩‍⚕️',
                    price: '¥180/小时',
                    languages: ['中文']
                },
                {
                    name: '张心理师',
                    specialty: '焦虑抑郁',
                    experience: '15年经验',
                    rating: 4.9,
                    reviews: 412,
                    status: 'busy',
                    image: '👨‍⚕️',
                    price: '¥250/小时',
                    languages: ['中文', '英文', '日文']
                }
            ];

            const container = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6.mb-8');
            container.innerHTML = '';

            counselors.forEach(counselor => {
                const card = document.createElement('div');
                card.className = 'counselor-card rounded-2xl p-6';
                
                const statusClass = counselor.status === 'available' ? 'available-badge' : 
                                  counselor.status === 'busy' ? 'busy-badge' : 'offline-badge';
                const statusText = counselor.status === 'available' ? '在线可约' : 
                                 counselor.status === 'busy' ? '忙碌中' : '离线';

                card.innerHTML = `
                    <div class="text-center">
                        <div class="w-20 h-20 ${statusClass} rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-3xl">${counselor.image}</span>
                        </div>
                        <div class="absolute top-4 right-4">
                            <span class="px-2 py-1 bg-white text-xs rounded-full ${counselor.status === 'available' ? 'text-green-600' : counselor.status === 'busy' ? 'text-orange-600' : 'text-gray-600'}">${statusText}</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">${counselor.name}</h3>
                        <p class="text-sm text-gray-600 mb-2">${counselor.specialty}</p>
                        <p class="text-xs text-gray-500 mb-3">${counselor.experience}</p>
                        
                        <div class="flex items-center justify-center mb-3">
                            <div class="rating-stars text-sm mr-2">
                                ${'★'.repeat(Math.floor(counselor.rating))}${'☆'.repeat(5-Math.floor(counselor.rating))}
                            </div>
                            <span class="text-sm text-gray-600">${counselor.rating} (${counselor.reviews}条评价)</span>
                        </div>
                        
                        <div class="mb-4">
                            <p class="text-sm font-medium text-gray-800 mb-1">${counselor.price}</p>
                            <div class="flex flex-wrap justify-center gap-1">
                                ${counselor.languages.map(lang => `<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">${lang}</span>`).join('')}
                            </div>
                        </div>
                        
                        <button onclick="bookCounselor('${counselor.name}')" class="w-full ${counselor.status === 'available' ? 'bg-blue-500 hover:bg-blue-600' : 'bg-gray-400 cursor-not-allowed'} text-white py-2 px-4 rounded-lg transition-colors" ${counselor.status !== 'available' ? 'disabled' : ''}>
                            ${counselor.status === 'available' ? '立即预约' : '暂不可约'}
                        </button>
                    </div>
                `;
                
                container.appendChild(card);
            });
        }

        // Generate support groups
        function generateSupportGroups() {
            const supportGroups = [
                {
                    name: '焦虑症互助小组',
                    description: '为焦虑症患者提供相互支持和经验分享的平台',
                    members: 1247,
                    active: true,
                    nextMeeting: '今晚 20:00',
                    category: 'anxiety',
                    facilitator: '专业心理师',
                    type: '线上会议'
                },
                {
                    name: '抑郁康复之路',
                    description: '抑郁症患者的康复支持和学习小组',
                    members: 892,
                    active: true,
                    nextMeeting: '明天 19:30',
                    category: 'depression',
                    facilitator: '康复患者',
                    type: '线上会议'
                },
                {
                    name: '压力管理工作坊',
                    description: '学习有效的压力管理技巧和放松方法',
                    members: 634,
                    active: false,
                    nextMeeting: '周六 14:00',
                    category: 'stress',
                    facilitator: '专业治疗师',
                    type: '线下活动'
                }
            ];

            const container = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6.mb-8:nth-of-type(2)');
            container.innerHTML = '';

            supportGroups.forEach(group => {
                const card = document.createElement('div');
                card.className = 'support-group-card rounded-2xl p-6';
                
                card.innerHTML = `
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">${group.name}</h3>
                            <p class="text-sm text-gray-600 mb-3">${group.description}</p>
                        </div>
                        <span class="px-2 py-1 ${group.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'} text-xs rounded-full ml-2">
                            ${group.active ? '活跃中' : '休息中'}
                        </span>
                    </div>
                    
                    <div class="space-y-2 mb-4">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">成员数量:</span>
                            <span class="font-medium text-gray-800">${group.members}人</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">下次活动:</span>
                            <span class="font-medium text-gray-800">${group.nextMeeting}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">主持人:</span>
                            <span class="font-medium text-gray-800">${group.facilitator}</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">活动形式:</span>
                            <span class="font-medium text-gray-800">${group.type}</span>
                        </div>
                    </div>
                    
                    <button onclick="joinSupportGroup('${group.name}')" class="w-full ${group.active ? 'bg-green-500 hover:bg-green-600' : 'bg-gray-400 cursor-not-allowed'} text-white py-2 px-4 rounded-lg transition-colors" ${!group.active ? 'disabled' : ''}>
                        ${group.active ? '加入小组' : '暂不可加入'}
                    </button>
                `;
                
                container.appendChild(card);
            });
        }

        // Display initial resources
        function displayInitialResources() {
            const resources = [
                {
                    title: '认知行为疗法基础指南',
                    category: 'anxiety',
                    type: '文章',
                    duration: '15分钟阅读',
                    description: '了解CBT的基本原理和如何在日常生活中应用这些技巧来管理焦虑和负面情绪。',
                    tags: ['CBT', '焦虑', '思维重构'],
                    author: '李心理博士',
                    date: '2024-09-15'
                },
                {
                    title: '正念冥想入门音频',
                    category: 'mindfulness',
                    type: '音频',
                    duration: '20分钟',
                    description: '专业的正念冥想指导音频，帮助您学习专注当下，减少压力和焦虑。',
                    tags: ['正念', '冥想', '放松'],
                    author: '正念教练团队',
                    date: '2024-10-01'
                },
                {
                    title: '睡眠改善实用技巧',
                    category: 'sleep',
                    type: '视频',
                    duration: '12分钟',
                    description: '睡眠专家分享的科学睡眠方法，包括睡眠卫生习惯和改善睡眠质量的具体技巧。',
                    tags: ['睡眠', '失眠', '睡眠卫生'],
                    author: '睡眠研究中心',
                    date: '2024-09-28'
                },
                {
                    title: '压力管理工作手册',
                    category: 'stress',
                    type: 'PDF',
                    duration: '30页',
                    description: '全面的压力管理指南，包含实用的工作表和练习，帮助您识别和应对生活中的压力源。',
                    tags: ['压力管理', '工作表', '应对策略'],
                    author: '压力管理专家',
                    date: '2024-10-05'
                }
            ];

            displayResources(resources);
        }

        // Display resources
        function displayResources(resources) {
            const container = document.getElementById('resource-results');
            container.innerHTML = '';

            resources.forEach(resource => {
                const item = document.createElement('div');
                item.className = 'resource-item p-6 rounded-2xl';
                
                const typeColors = {
                    '文章': 'bg-blue-100 text-blue-800',
                    '音频': 'bg-green-100 text-green-800',
                    '视频': 'bg-red-100 text-red-800',
                    'PDF': 'bg-purple-100 text-purple-800'
                };

                item.innerHTML = `
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <div class="flex items-center mb-2">
                                <span class="px-2 py-1 ${typeColors[resource.type]} text-xs rounded-full mr-2">${resource.type}</span>
                                <span class="text-xs text-gray-500">${resource.duration}</span>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">${resource.title}</h3>
                            <p class="text-sm text-gray-600 mb-3">${resource.description}</p>
                            
                            <div class="flex flex-wrap gap-1 mb-3">
                                ${resource.tags.map(tag => `<span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">${tag}</span>`).join('')}
                            </div>
                            
                            <div class="flex items-center justify-between text-xs text-gray-500">
                                <span>作者: ${resource.author}</span>
                                <span>发布日期: ${resource.date}</span>
                            </div>
                        </div>
                        
                        <button onclick="accessResource('${resource.title}')" class="ml-4 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                            查看详情
                        </button>
                    </div>
                `;
                
                container.appendChild(item);
            });
        }

        // Display initial doctors
        function displayInitialDoctors() {
            const doctors = [
                {
                    name: '张精神科医生',
                    specialty: '精神科医生',
                    hospital: '北京协和医院',
                    rating: 4.9,
                    reviews: 156,
                    distance: '2.3公里',
                    price: '¥300/次',
                    availability: '可预约',
                    image: '👨‍⚕️'
                },
                {
                    name: '李临床心理师',
                    specialty: '临床心理师',
                    hospital: '北京大学第六医院',
                    rating: 4.8,
                    reviews: 203,
                    distance: '3.1公里',
                    price: '¥250/次',
                    availability: '可预约',
                    image: '👩‍⚕️'
                },
                {
                    name: '王心理治疗师',
                    specialty: '心理治疗师',
                    hospital: '北京回龙观医院',
                    rating: 4.7,
                    reviews: 89,
                    distance: '5.2公里',
                    price: '¥200/次',
                    availability: '明天可约',
                    image: '👨‍⚕️'
                }
            ];

            displayDoctors(doctors);
        }

        // Display doctors
        function displayDoctors(doctors) {
            const container = document.getElementById('doctor-results');
            container.innerHTML = '';

            doctors.forEach(doctor => {
                const card = document.createElement('div');
                card.className = 'resource-card rounded-2xl p-6';
                
                card.innerHTML = `
                    <div class="text-center">
                        <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                            <span class="text-white text-2xl">${doctor.image}</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-1">${doctor.name}</h3>
                        <p class="text-sm text-gray-600 mb-2">${doctor.specialty}</p>
                        <p class="text-xs text-gray-500 mb-3">${doctor.hospital}</p>
                        
                        <div class="flex items-center justify-center mb-3">
                            <div class="rating-stars text-sm mr-2">
                                ${'★'.repeat(Math.floor(doctor.rating))}${'☆'.repeat(5-Math.floor(doctor.rating))}
                            </div>
                            <span class="text-sm text-gray-600">${doctor.rating} (${doctor.reviews}条评价)</span>
                        </div>
                        
                        <div class="space-y-2 text-sm mb-4">
                            <div class="flex justify-between">
                                <span class="text-gray-600">距离:</span>
                                <span class="font-medium text-gray-800">${doctor.distance}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">费用:</span>
                                <span class="font-medium text-gray-800">${doctor.price}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">可约时间:</span>
                                <span class="font-medium text-green-600">${doctor.availability}</span>
                            </div>
                        </div>
                        
                        <button onclick="bookDoctor('${doctor.name}')" class="w-full bg-orange-500 text-white py-2 px-4 rounded-lg hover:bg-orange-600 transition-colors">
                            预约咨询
                        </button>
                    </div>
                `;
                
                container.appendChild(card);
            });
        }

        // Emergency breathing exercise
        let breathingActive = false;
        let breathingInterval;

        function startEmergencyBreathing() {
            const circle = document.getElementById('breathing-circle');
            const instruction = document.getElementById('breathing-instruction');
            const button = document.getElementById('breathing-btn');
            
            if (!breathingActive) {
                breathingActive = true;
                button.textContent = '停止练习';
                button.classList.remove('from-blue-500', 'to-teal-500');
                button.classList.add('from-red-500', 'to-red-600');
                
                let phase = 0; // 0: inhale, 1: hold, 2: exhale
                let count = 0;
                
                function breathingCycle() {
                    if (phase === 0) {
                        // Inhale
                        instruction.textContent = '缓慢吸气，保持平静';
                        circle.textContent = `吸气 ${4 - count}`;
                        circle.classList.add('inhale');
                        circle.classList.remove('exhale');
                        count++;
                        if (count >= 4) {
                            phase = 1;
                            count = 0;
                        }
                    } else if (phase === 1) {
                        // Hold
                        instruction.textContent = '屏住呼吸，放松身心';
                        circle.textContent = `屏息 ${7 - count}`;
                        count++;
                        if (count >= 7) {
                            phase = 2;
                            count = 0;
                        }
                    } else {
                        // Exhale
                        instruction.textContent = '缓慢呼气，释放紧张';
                        circle.textContent = `呼气 ${8 - count}`;
                        circle.classList.add('exhale');
                        circle.classList.remove('inhale');
                        count++;
                        if (count >= 8) {
                            phase = 0;
                            count = 0;
                        }
                    }
                }
                
                breathingInterval = setInterval(breathingCycle, 1000);
                
            } else {
                breathingActive = false;
                clearInterval(breathingInterval);
                
                button.textContent = '开始练习';
                button.classList.remove('from-red-500', 'to-red-600');
                button.classList.add('from-blue-500', 'to-teal-500');
                
                circle.textContent = '准备开始';
                circle.classList.remove('inhale', 'exhale');
                instruction.textContent = '点击开始按钮进行4-7-8呼吸法练习';
            }
        }

        // Generate safety plan
        function generateSafetyPlan() {
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
            modal.innerHTML = `
                <div class="bg-white rounded-2xl p-8 max-w-2xl w-full max-h-90vh overflow-y-auto">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-gray-800 mb-2">我的安全计划</h3>
                        <p class="text-gray-600">为困难时刻准备的个性化应对方案</p>
                    </div>
                    
                    <div class="space-y-6">
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-3">🚨 警告信号识别</h4>
                            <p class="text-sm text-blue-700 mb-2">当您注意到这些信号时，请立即使用您的安全计划：</p>
                            <ul class="text-sm text-blue-600 space-y-1">
                                <li>• 持续的绝望感或无助感</li>
                                <li>• 睡眠模式显著改变</li>
                                <li>• 社交退缩和孤立</li>
                                <li>• 强烈的焦虑或恐慌发作</li>
                                <li>• 自伤或自杀的想法</li>
                            </ul>
                        </div>
                        
                        <div class="p-4 bg-green-50 rounded-lg">
                            <h4 class="font-semibold text-green-800 mb-3">🛠️ 内部应对策略</h4>
                            <p class="text-sm text-green-700 mb-2">您可以独自完成的活动：</p>
                            <ul class="text-sm text-green-600 space-y-1">
                                <li>• 进行深呼吸练习或冥想</li>
                                <li>• 听平静的音乐或自然声音</li>
                                <li>• 写下您的感受和想法</li>
                                <li>• 进行温和的运动或散步</li>
                                <li>• 专注于当下的感官体验</li>
                            </ul>
                        </div>
                        
                        <div class="p-4 bg-purple-50 rounded-lg">
                            <h4 class="font-semibold text-purple-800 mb-3">👥 社会支持网络</h4>
                            <p class="text-sm text-purple-700 mb-2">可以联系的人：</p>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-sm text-purple-600">紧急联系人：</span>
                                    <span class="text-sm font-medium text-purple-800">____________</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-purple-600">好友/家人：</span>
                                    <span class="text-sm font-medium text-purple-800">____________</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-purple-600">治疗师：</span>
                                    <span class="text-sm font-medium text-purple-800">____________</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-orange-50 rounded-lg">
                            <h4 class="font-semibold text-orange-800 mb-3">🏥 专业联系信息</h4>
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-orange-600">心理危机热线：</span>
                                    <span class="font-medium text-orange-800">400-161-9995</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-orange-600">急救电话：</span>
                                    <span class="font-medium text-orange-800">120</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-orange-600">最近医院：</span>
                                    <span class="font-medium text-orange-800">____________</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <h4 class="font-semibold text-gray-800 mb-3">🏠 安全环境</h4>
                            <p class="text-sm text-gray-700 mb-2">让自己处于安全的环境中：</p>
                            <ul class="text-sm text-gray-600 space-y-1">
                                <li>• 移除可能造成伤害的物品</li>
                                <li>• 前往公共场所或有人陪伴的地方</li>
                                <li>• 避免独处，特别是在夜间</li>
                                <li>• 保持房间明亮和舒适</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="mt-8 flex space-x-3">
                        <button onclick="downloadSafetyPlan()" class="flex-1 bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors">
                            下载计划
                        </button>
                        <button onclick="this.closest('.fixed').remove()" class="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors">
                            关闭
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            // Animate modal appearance
            anime({
                targets: modal.querySelector('div'),
                scale: [0.9, 1],
                opacity: [0, 1],
                duration: 300,
                easing: 'easeOutExpo'
            });
        }

        // Search functions
        function searchResources() {
            const searchTerm = document.getElementById('resource-search').value.toLowerCase();
            const category = document.getElementById('resource-category').value;
            
            // Mock search results
            const allResources = [
                {
                    title: '认知行为疗法基础指南',
                    category: 'anxiety',
                    type: '文章',
                    duration: '15分钟阅读',
                    description: '了解CBT的基本原理和如何在日常生活中应用这些技巧来管理焦虑和负面情绪。',
                    tags: ['CBT', '焦虑', '思维重构'],
                    author: '李心理博士',
                    date: '2024-09-15'
                },
                {
                    title: '正念冥想入门音频',
                    category: 'mindfulness',
                    type: '音频',
                    duration: '20分钟',
                    description: '专业的正念冥想指导音频，帮助您学习专注当下，减少压力和焦虑。',
                    tags: ['正念', '冥想', '放松'],
                    author: '正念教练团队',
                    date: '2024-10-01'
                },
                {
                    title: '睡眠改善实用技巧',
                    category: 'sleep',
                    type: '视频',
                    duration: '12分钟',
                    description: '睡眠专家分享的科学睡眠方法，包括睡眠卫生习惯和改善睡眠质量的具体技巧。',
                    tags: ['睡眠', '失眠', '睡眠卫生'],
                    author: '睡眠研究中心',
                    date: '2024-09-28'
                }
            ];

            let filteredResources = allResources;

            if (searchTerm) {
                filteredResources = filteredResources.filter(resource => 
                    resource.title.toLowerCase().includes(searchTerm) ||
                    resource.description.toLowerCase().includes(searchTerm) ||
                    resource.tags.some(tag => tag.toLowerCase().includes(searchTerm))
                );
            }

            if (category) {
                filteredResources = filteredResources.filter(resource => resource.category === category);
            }

            displayResources(filteredResources);
        }

        function searchDoctors() {
            const location = document.getElementById('location-search').value;
            const specialty = document.getElementById('doctor-specialty').value;
            
            // Mock search results
            const allDoctors = [
                {
                    name: '张精神科医生',
                    specialty: '精神科医生',
                    hospital: '北京协和医院',
                    rating: 4.9,
                    reviews: 156,
                    distance: '2.3公里',
                    price: '¥300/次',
                    availability: '可预约',
                    image: '👨‍⚕️'
                },
                {
                    name: '李临床心理师',
                    specialty: '临床心理师',
                    hospital: '北京大学第六医院',
                    rating: 4.8,
                    reviews: 203,
                    distance: '3.1公里',
                    price: '¥250/次',
                    availability: '可预约',
                    image: '👩‍⚕️'
                }
            ];

            let filteredDoctors = allDoctors;

            if (specialty) {
                filteredDoctors = filteredDoctors.filter(doctor => 
                    doctor.specialty.toLowerCase().includes(specialty.toLowerCase())
                );
            }

            displayDoctors(filteredDoctors);
        }

        // Action functions
        function callHotline(number) {
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
            modal.innerHTML = `
                <div class="bg-white rounded-2xl p-8 max-w-md w-full text-center">
                    <div class="w-16 h-16 bg-red-500 rounded-full mx-auto mb-4 flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-4">确认拨打电话</h3>
                    <p class="text-lg text-gray-600 mb-6">${number}</p>
                    <div class="flex space-x-3">
                        <button onclick="this.closest('.fixed').remove()" class="flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors">
                            取消
                        </button>
                        <button onclick="window.open('tel:${number}'); this.closest('.fixed').remove();" class="flex-1 bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-600 transition-colors">
                            确认拨打
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }

        function bookCounselor(name) {
            showNotification('预约功能', `正在为您安排与${name}的咨询...`, 'info');
        }

        function joinSupportGroup(name) {
            showNotification('加入小组', `您已成功加入${name}！`, 'success');
        }

        function accessResource(title) {
            showNotification('资源访问', `正在打开《${title}》...`, 'info');
        }

        function bookDoctor(name) {
            showNotification('预约医生', `正在为您安排与${name}的预约...`, 'info');
        }

        function showAllCounselors() {
            showNotification('查看咨询师', '正在加载更多咨询师信息...', 'info');
        }

        function createSupportGroup() {
            showNotification('创建小组', '小组创建功能即将上线！', 'info');
        }

        function downloadSafetyPlan() {
            showNotification('下载计划', '安全计划已生成并下载到您的设备！', 'success');
            document.querySelector('.fixed').remove();
        }

        function showNotification(title, message, type) {
            const notification = document.createElement('div');
            const bgColor = type === 'success' ? 'bg-green-50 border-green-400' : 
                           type === 'error' ? 'bg-red-50 border-red-400' : 'bg-blue-50 border-blue-400';
            const textColor = type === 'success' ? 'text-green-800' : 
                             type === 'error' ? 'text-red-800' : 'text-blue-800';
            
            notification.className = `fixed top-4 right-4 ${bgColor} border-l-4 p-4 rounded-lg shadow-lg z-50`;
            notification.innerHTML = `
                <div class="flex">
                    <div class="ml-3">
                        <p class="text-sm font-medium ${textColor}">${title}</p>
                        <p class="text-sm ${textColor.replace('800', '700')}">${message}</p>
                    </div>
                </div>
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 3000);
        }
    </script>
</body>
</html>